import { defineComponent, reactive } from "vue";
import PageImgTitle from "@/components/PageImgTitle";
import CardView from "@/components/CardView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ListView from "@/components/ListView";
import { ILabelProps } from "@/components/Label/types";
import { ITextGroupPropsData } from "@/components/TextGroups/types";
import { getUserInfoUrl, phoneClick } from "@/command/apiTool";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import ButtonView from "@/components/ButtonView";
import Text from "@/components/Text";
import { Divider } from "vant";
import FilterMenuSearch from "@/components/FilterMenuSearch";

export default defineComponent({
  name: "",
  setup() {
    const form = reactive({});
    const renderItem = (e: any) => {
      const data: ITextGroupPropsData[] = [
        {
          name: "需代购种子",
          value: e.productName,
          width: "40%",
        },
        {
          name: "代购数量",
          value: e.applyNum,
          width: "40%",
        },
      ];
      const labels: ILabelProps[] = [
        {
          name: "结队大户",
          type: "tag",
        },
      ];
      return (
        <div class="flex flex-col w-full">
          <RoundInfo
            labels={labels}
            right={() => <Text>{e.createDate}</Text>}
            src={e.logoUrl}
            title={e.userName}
            data={data}
          />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView>{e.address}</TextView>
              </RowView>
              <ButtonView class="!h-[32px]" onClick={() => phoneClick(e.phone)}>
                联系ta
              </ButtonView>
              {/* <RoundEdgeButtonGroup data={buttons} /> */}
            </RowView>
          </GreyBlock>
          <Divider />
        </div>
      );
    };
    const render1 = () => {
      const data: IFilterMenuChoose[] = [
        { type: "area", key: "code" },
        { type: "productType", key: "productId", title: "种植品种" },
        { type: "datePicker", key: "date", title: "日期" },
      ];
      return (
        <CardView>
          <FilterMenuSearch choose={data} v-model={form} searchKey="name" />
          <ListView
            {...getUserInfoUrl({
              dh: "/api/H5/skill/product/heavy/historyList",
              xh: "/api/H5/skill/product/small/applyHistoryList",
            })}
            params={form}
            type="page"
            renderItem={renderItem}
          />
        </CardView>
      );
    };
    return () => {
      return <PageImgTitle title="帮选记录">{render1()}</PageImgTitle>;
    };
  },
});
